<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref } from 'vue'
import SideBar from '@/components/side-bar/SideBar.vue'
import WriterHeader from '@/components/writer-header/WriterHeader.vue'
import AiChat from './ai-chat/AiChat.vue'
</script>
<template>
  <div class="home-page">
    <div class="header-wrapper">
      <WriterHeader></WriterHeader>
    </div>
    <div class="main">
      <div class="side-bar-wrapper">
        <SideBar></SideBar>
      </div>
      <div class="main-content">
        <AiChat></AiChat>
        <!-- <router-view></router-view> -->
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.home-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .header-wrapper {
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #dcdcdc;
  }
  .main {
    height: calc(100vh - 50px);
    display: flex;
    background-color: #dcdcdc;
    .main-content {
      flex: 1;
      height: inherit;
      box-sizing: border-box;
    }
  }
}
</style>
